前言

今天要來介紹 Scroll Progress，在長篇內容或多段落的頁面中你常常會看到它的存在，目的是讓使用者知道自己目前閱讀的位置。它能夠根據捲動進度，動態顯示使用者在頁面中的位置。這樣的設計不僅提升閱讀體驗，也能為整體介面增添互動感。接下來就一步一步來跟著我製作唄～

Scroll Progress

▲ 是否有注意到在網頁頂端有藍色進度條😱

1. 使用 Shadcn CLI 加入 Scroll Progress

   npx shadcn@latest add @animate-ui/primitives-animate-scroll-progress
   

2. Import 元件並將元件放在想要的位置上

   這邊分為 local 和 global。
   Local 意思是監聽對象是元素本身（通常是某個 section 或 div），適合做「局部區塊動畫」。
   Global 意思是整個頁面的全域滾動（像是瀏覽器 DOM window），適合做「全頁滾動進度動畫」，例如進度條。

   import {
       ScrollProgressProvider,
       ScrollProgress,
       ScrollProgressContainer,
       type ScrollProgressDirection,
   } from '@/components/animate-ui/primitives/animate/scroll-progress';
   
   // Local
   <ScrollProgressProvider>
       <ScrollProgress />
       <ScrollProgressContainer>Scrollable content</ScrollProgressContainer>
   </ScrollProgressProvider>
   
   // Global
   <ScrollProgressProvider global>
       <ScrollProgress />
   </ScrollProgressProvider>
   
   

   在開頭介紹的 Scroll Progress 是使用 Global 的方式進行滾動

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

ScrollProgressProvider 可調整的部分：

ScrollProgress 可調整的部分：

小結

今天主要練習如何在網頁上操作 Animate UI Scroll Progress，若覺得不過癮，需要有更多範例，可以至 Animate UI Scroll Progress 當中的設定滾動方向。

Reference

• Animate UI Docs